<template>
  <view class="app-container ver-layout">
    <!-- 上传照片   -->
    <view class="photo-layout hor-layout-center" @click="uploadImage">
      <view class="photo-view ver-layout-center-all">
        <u-icon v-if="!form.image" name="camera" color="#999999" size="50"></u-icon>
        <image v-else :src="form.image" class="photo-image"/>
      </view>
      <view class="upload-view">上传照片</view>
    </view>
    <!-- 其他信息   -->
    <u-form :model="form" ref="uForm" label-width="107px" :label-style="formLabel">
      <u-form-item label="姓 名">
        <u-input v-model="form.realname" placeholder="请输入学生姓名" :maxlength="10"/>
      </u-form-item>
      <u-form-item label="身份证号">
        <u-input v-model="form.id_card" type="idcard" placeholder="请输入身份证号" :maxlength="18"/>
      </u-form-item>
      <u-form-item label="联系人">
        <view class="form-select-item hor-layout-center" @click="form.showContact=true">
          <view class="form-select-text single-line">{{ form.mainContactObj.label ? form.mainContactObj.label : '请选择' }}
          </view>
          <u-icon name="arrow-right" color="#000000"></u-icon>
        </view>
        <u-select v-model="form.showContact" :list="contactList" title="选择联系人"
                  :default-value="form.mainContactObj.value" @confirm="confirmSelectContact"></u-select>
      </u-form-item>
      <u-form-item label="联系电话">
        <u-input v-model="form.phone" type="number" placeholder="请输入联系电话" :maxlength="11"/>
      </u-form-item>
      <u-form-item label="报课课程">
        <view class="form-select-item hor-layout-center" @click="form.showCourse=true">
          <view class="form-select-text single-line">{{ form.courseObj.label ? form.courseObj.label : '请选择' }}</view>
          <u-icon name="arrow-right" color="#000000"></u-icon>
        </view>
        <u-select v-model="form.showCourse" mode="mutil-column-auto" :list="courseList" title="选择报课课程"
                  :default-value="form.courseObj.value" @confirm="confirmSelectCourse"></u-select>
      </u-form-item>
      <u-form-item label="分配教师">
        <view class="form-select-item hor-layout-center" @click="navToSelectTeacher">
          <view class="form-select-text">{{ form.teacherObj.name ? form.teacherObj.name : '请选择' }}</view>
          <u-icon name="arrow-right" color="#000000"></u-icon>
        </view>
      </u-form-item>
<!--      <u-form-item label="上课时间">-->
<!--        <view class="form-select-item hor-layout-center" @click="form.showClassDate=true">-->
<!--          <view class="form-select-text">{{ form.classDateObj.label ? form.classDateObj.label : '请选择' }}</view>-->
<!--          <u-icon name="arrow-right" color="#000000"></u-icon>-->
<!--        </view>-->
<!--        <u-select v-model="form.showClassDate" mode="mutil-column-auto" :list="studyTimes" title="选择上课时间"-->
<!--                  :default-value="form.classDateObj.value" @confirm="selectTime"></u-select>-->
<!--      </u-form-item>-->
      <u-form-item label="上课日期">
        <view class="form-select-item hor-layout-center" @click="form.showTime=true">
          <view class="form-select-text">{{ form.class_date ? form.class_date : '请选择' }}</view>
          <u-icon name="arrow-right" color="#999999"></u-icon>
          <u-picker v-model="form.showTime" :params="timePara" :default-time="form.class_date"
                    title="选择开课时间" @confirm="selectTime"></u-picker>
        </view>
      </u-form-item>
      <u-form-item label="来源渠道">
        <view class="form-select-item hor-layout-center" @click="form.showChannel=true">
          <view class="form-select-text">{{ form.channelObj.label ? form.channelObj.label : '请选择' }}</view>
          <u-icon name="arrow-right" color="#000000"></u-icon>
        </view>
        <u-select v-model="form.showChannel" :list="channelList" title="选择来源渠道"
                  :default-value="form.channelObj.value" @confirm="confirmSelectChannel"></u-select>
      </u-form-item>
      <u-form-item label="所在学校">
        <u-input v-model="form.school" placeholder="请输入当前所在学校" :maxlength="20"/>
      </u-form-item>
      <u-form-item label="家庭住址">
        <u-input v-model="form.home_address" placeholder="请输入家庭住址" :maxlength="30"/>
      </u-form-item>
    </u-form>
    <view class="submit-view" @click="saveStudentInfo">保存</view>
  </view>
</template>

<script>
import {home, selectTeacher, editInfo} from "@/router.js"
import uploadFile from '@/common/ossutil/uploadFile.js'
import {EditInfoApi} from "@/api/enterStudent.js"

let engine = new EditInfoApi()
export default {
  name: "editInfo",
  data() {
    return {
      timePara: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false
      },
      formLabel: {
        color: "#282828",
        fontSize: '15px',
        textAlign: 'justify',
        textAlignLast: 'justify',
        display: 'inline-block',
        paddingRight: '27px'
      },
      form: {
        image: '',//图片路径
        avatar: '',
        realname: '',
        id_card: '',
        main_name: '',
        mainContactObj: {value: undefined, label: ''},
        phone: '',
        courseObj: {value: undefined, label: ''},
        course: '',
        teacherObj: '',
        teacher: '',
        classDateObj: {value: undefined, label: ''},
        class_date: '',
        channelObj: {value: undefined, label: ''},
        channel_id: '',
        time_id: '',
        class_num: '',
        free_class_num: '',
        course_consultant: '',
        school: '',
        gift: '',
        home_address: '',
        showChannel: false,
        showContact: false,
        showCourse: false,
        showClassDate: false,
        showTime: false,
        showGift: false
      },
      channelList: [],
      contactList: [],
      courseList: [],
      studyTimes: [],
      radioList: [{name: "男"}, {name: "女"}]
    }
  },
  computed: {
    getSelectCourse() {
      let {value} = this.form.course
      return [value]
    }
  },
  onLoad() {
    this.getChannelList()
    this.getContactList()
    this.getCourseList()
    this.getStudyTimes()
  },
  methods: {
    getChannelList() {
      engine.getChannelList().then(res => {
        this.channelList = res.data.map(item => {
          return {value: item.id, label: item.name}
        })
      })
    },
    getContactList() {
      engine.getAppellations().then(res => {
        this.contactList = res.data.map(item => {
          return {value: item.id, label: item.name}
        })
      })
    },
    getCourseList() {
      engine.getCourseList().then(res => {
        this.courseList = res.data
      })
    },
    getStudyTimes() {
      engine.getStudyTimes().then(res => {
        this.studyTimes = res.data
      })
    },
    navToSelectTeacher() {
      this.$u.route({url: selectTeacher, params: {from: editInfo}})
    },
    confirmSelectTeacher(object) {
      this.form.teacherObj = object
      this.form.teacher = object.id
    },
    selectTime(e) {
      this.form.class_date = ''
      let {year, month, day, hour, minute, second} = this.timePara
      if (year) this.form.class_date += e.year;
      if (month) this.form.class_date += '-' + e.month;
      if (day) this.form.class_date += '-' + e.day;
      if (hour) this.form.class_date += ' ' + e.hour;
      if (minute) this.form.class_date += ':' + e.minute;
      if (second) this.form.class_date += ':' + e.second;
    },
    confirmSelectChannel(e) {
      console.log("confirmSelectContact", e)
      let channelIndex = this.channelList.findIndex(item => item.value === e[0].value)
      this.form.channelObj.value = [channelIndex]
      this.form.channelObj.label = e[0].label
      this.form.channel_id = e[0].value
    },
    confirmSelectContact(e) {
      console.log("confirmSelectContact", e)
      let contactIndex = this.contactList.findIndex(item => item.value === e[0].value)
      this.form.mainContactObj.value = [contactIndex]
      this.form.mainContactObj.label = e[0].label
      this.form.main_name = e[0].value
    },
    confirmSelectCourse(e) {
      console.log("confirmSelectCourse", e)
      let courseIndex = this.courseList.findIndex(item => item.value === e[0].value),
          courseChildIndex = this.courseList[courseIndex].children.findIndex(item => item.value === e[1].value)
      this.form.courseObj.value = [courseIndex, courseChildIndex]
      this.form.courseObj.label = `${e[0].label}-${e[1].label}`
      this.form.course = e[1].value
    },
    saveStudentInfo() {
      engine.registerStudent({...this.form}).then(res => {
        console.log("saveStudentInfo", res)
        if (res.code !== 200) {
          this.$u.toast(res.message)
        } else {
          this.$u.toast("报名成功！")
          this.$u.routeDelay({type: 'reLaunch', url: home})
        }
      })
    },
    uploadImage() {
      uni.chooseImage({count: 1}).then(res => {
        let path = res[1].tempFilePaths[0],
            file = res[1].tempFiles[0]
        uploadFile(path, file, (f_name, r_path) => {
          console.log("uploadFile", f_name, r_path)
          this.form.image = r_path
          this.saveImg(f_name)
        }, (err) => {
          this.$u.toast("上传错误！")
          console.error("uploadFile", err)
        })
      })
    },
    saveImg(path) {
      engine.saveResource(path).then(res => {
        this.form.avatar = res.data[0];
      }).catch(err => this.$u.toast(err.message))
    }
  }
}
</script>

<style scoped>
.photo-layout {
  padding-bottom: 25rpx;
  border-bottom: 1px solid #E5E5E5;
}

.photo-view {
  width: 118rpx;
  height: 146rpx;
  background: #D1D1D1;
}

.photo-image {
  width: 100%;
  height: 100%
}

.upload-view {
  margin-left: 50rpx;
  font-size: 30rpx;
  color: #333333;
  font-family: Source Han Sans CN;
}


.submit-view {
  margin: auto;
  margin-top: 15px;
  height: 36px;
  line-height: 36px;
  width: 70%;
  text-align: center;
  background: #42B4AB;
  border-radius: 18px;
  /* 文本样式 */
  font-size: 15px;
  font-weight: bold;
  color: #FFFFFF;
}

.form-select-item {
  width: 100%;
}

.form-select-text {
  flex: 1;
  width: 0;
  margin-right: 3px;
  text-align: right;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #000000;
}
</style>
